<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout布局 - Layui</title>

<link rel="stylesheet" href="../res/layui/css/layui.css">

<style>
.demo1{width: 200px;}
</style>
</head>
<body>

<div class="layui-layout layui-layout-admin">
  <div class="layui-header"></div>
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <ul class="layui-nav layui-nav-tree site-demo-nav">
		<li class="layui-nav-item layui-this">
		  <a href="">在线调试</a>
		</li>
		<li class="layui-nav-item layui-nav-title">
		  <a href="">基本元素</a>
		</li>
		<!-- .layui-nav-itemed 用于控制子菜单默认展开 -->
		<li class="layui-nav-item">
		  <a href="javascript:;">
		    <i class="layui-icon" style="top:1px;font-size:18px;">&#xe641;</i>
			<cite>按钮</cite>
		  </a>
		  <dl class="layui-nav-child">
		    <dd><a href="">移动模块</a></dd>
			<dd><a href="">后台模版</a></dd>
			<dd><a href="">电商平台</a></dd>
		  </dl>
		</li>
		<li class="layui-nav-item">
		  <a href="">
		    <i class="layui-icon" style="top:1px;font-size:18px;">&#xe63c;</i>
			<cite>表单</cite>
		  </a>
		</li>
		<li class="layui-nav-item">
		  <a href="">
		    <i class="layui-icon" style="top:1px;font-size:18px;">&#xe609;</i>
			<cite>导航</cite>
		  </a>
		</li>
		<li class="layui-nav-item">
		  <a href="">
		    <i class="layui-icon" style="top:1px;font-size:18px;">&#xe62a;</i>
			<cite>Tab选项卡</cite>
		  </a>
		</li>
		<li class="layui-nav-item">
		  <a href="">
		    <i class="layui-icon" style="top:1px;font-size:18px;">&#xe60c;</i>
			<cite>辅助性元素</cite>
		  </a>
		</li>
		<li class="layui-nav-item layui-nav-title">
		  <a href="">官方组件</a>
		</li>
		<li class="layui-nav-item">
		  <a href="">
		    <i class="layui-icon" style="top:1px;font-size:18px;">&#xe638;</i>
			<cite>弹出层</cite>
		  </a>
		</li>
		<li class="layui-nav-item">
		  <a href="">
		    <i class="layui-icon" style="top:1px;font-size:18px;">&#xe63a;</i>
			<cite>即时通讯</cite>
		  </a>
		</li>
		<li class="layui-nav-item">
		  <a href="">
		    <i class="layui-icon" style="top:1px;font-size:18px;">&#xe637;</i>
			<cite>日期时间选择</cite>
		  </a>
		</li>
		<li class="layui-nav-item">
		  <a href="">
		    <i class="layui-icon" style="top:1px;font-size:18px;">&#xe633;</i>
			<cite>多功能分页</cite>
		  </a>
		</li>
		<li class="layui-nav-item">
		  <a href="">
		    <i class="layui-icon" style="top:1px;font-size:18px;">&#xe628;</i>
			<cite>模板引擎</cite>
		  </a>
		</li>
		<li class="layui-nav-item">
		  <a href="">
		    <i class="layui-icon" style="top:1px;font-size:18px;">&#xe639;</i>
			<cite>富文本编辑器</cite>
		  </a>
		</li>
		<li class="layui-nav-item">
		  <a href="">
		    <i class="layui-icon" style="top:1px;font-size:18px;">&#xe62f;</i>
			<cite>文件上传</cite>
		  </a>
		</li>
		<li class="layui-nav-item">
		  <a href="">
		    <i class="layui-icon" style="top:1px;font-size:18px;">&#xe62e;</i>
			<cite>树形菜单</cite>
		  </a>
		</li>
		<li class="layui-nav-item">
		  <a href="">
		    <i class="layui-icon" style="top:1px;font-size:18px;">&#xe631;</i>
			<cite>工具块</cite>
		  </a>
		</li>
		<li class="layui-nav-item">
		  <a href="">
		    <i class="layui-icon" style="top:1px;font-size:18px;">&#xe636;</i>
			<cite>流加载</cite>
		  </a>
		</li>
		<li class="layui-nav-item">
		  <a href="">
		    <i class="layui-icon" style="top:1px;font-size:18px;">&#xe635;</i>
			<cite>代码修饰器</cite>
		  </a>
		</li>
		<li class="layui-nav-item" style="height:30px;text-align:center"></li>
		<!-- <span class="layui-nav-bar" style="height:45px;opacity:1;"></span> -->
	  </ul>
    </div>
  </div>
  <div class="layui-body">
    
  </div>
</div>

<script src="../res/layui/layui.js"></script>
<script>
layui.use('element', function(){
  var element = layui.element(); //导航的hover效果、二级菜单等功能，需要依赖element模块
});
</script>
</body>
</html>
